<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/page-bg1.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' leftIconColor="#ffffff" bgColor="transparent" @leftClick="navBack"  :title="info.title">
				<view slot="center" class="navTitle">
					{{questionInfo.name}} 
				</view>
			</u-navbar>
			<view class="testProcess pd30">
				<view class="pt">
					<text>答题进度</text><text class="n1">{{curTopic}}</text><text class="n3">/</text><text class="n2">{{questionInfo.topicCount}}</text>
				</view>
				<view class="pp">
					<u-line-progress height="10rpx" inactiveColor="rgba(255,255,255,0.5)" activeColor="#ffffff" :percentage="(curTopic)/(questionInfo.topicCount)*100" :showText="false"></u-line-progress>
				</view>
			</view>
		</view>
		<view class="flex1 pb50">
			<scroll-view scroll-y="true" class="scrollView pt30 pd30">
				<view class="testMainBox">
					<!-- <swiper class="main" :indicator-dots="false" :autoplay="false" :duration="300" :touchable="false" :current="current" catchtouchmove="stopPropagation">
						<swiper-item v-for="(i,index) in info.list" catchtouchmove="stopPropagation">
							<view class="qa">
								<view class="qt">
									<view class="tag">
										{{i.type==0?'单选题':'多选题'}}
									</view>
									<view class="it">
										{{i.title}}
									</view>
									<view class="ops">
										<view class="li" :class="result[index].includes(index2)?'selected':''" v-for="(l,index2) in i.options" @tap="selectCheck(index,index2,i.type)">
											<view class="ll">
												{{letters[index2]}}.
											</view>
											<view class="lc">
												{{l}}
											</view>
											<view class="lr">
												<view class="ico">
													<image src="@/static/images/icon-gou.png" mode="aspectFit"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="qb" :class="result[current].length==0?'disabled':''" v-if="i.type==1&&(current+1)<result.length" @tap="goNext">
									下一题
								</view>
								<view class="qb" :class="result[current].length==0?'disabled':''" v-if="(current+1)==result.length" @tap="submit">
									提交
								</view>
							</view>
						</swiper-item>
					</swiper> -->
					
					<view class="main" >
						<view >
							<view class="qa">
								<view class="qt">
									<view class="tag">
										{{info.type==1?'单选题':'多选题'}}
									</view>
									<view class="it">
										{{info.name}}
									</view>
									<view class="ops">
										<view class="li" :class="info.value==item.value?'selected':''"
											v-for="(item, index) in info.optContent" :key="index"
											@click="info.value=item.value">
											<view class="ll">
												{{item.value}}.
											</view>
											<view class="lc">
												{{item.name}}
											</view>
											<view class="lr">
												<view class="ico">
													<image src="@/static/images/icon-gou.png" mode="aspectFit"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="qb"  @click="toPrev" v-if="curTopic>1">
									上一题
								</view>
								<view class="qb"  @click="toNext('')" v-if="curTopic<questionInfo.topicCount">
									下一题
								</view>
								<view class="qb"  v-else  @click="toNext('submit')">
									提交
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerInfo: {
					title: '津巴多时间观念表（ZTPI）测量',
					titleLeft: true,
					heade_flag: false
				},
				current: 0,
				letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
				info: {},
				startTime: '',
				endTime: '',
				result: [],
				// 判断是什么题
				pdNumber: '',
				timer:null,
				time:0,
				evaluationId:'',
				questionInfo: {},
				info: {},
				typeAttr: ['', '单选题', '多选题', '简答题', '填空题'],
				topicAttr: [],
				curTopic: 1,
				allTotal: 1,

			}
		},
		onLoad(e) {

			this.curId = e.id
			this.evaluationId=e.evaluationId
			this.startTime=this.getCurDate()
			this.getInfo()
			this.getTopic()
		},
		methods: {
			
			getTimer(){
				
				this.timer = setInterval(()=> {
					console.log(this.time,12121)
					if (this.time > 1) {
						this.time--;
					} else {
						
						clearInterval(this.timer);
						uni.showToast({
							title:'答题超时，请重新开始！',
							icon:"none"
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1200)
					}
				}, 1000);
			},
			selectCheck(idx) {
				
				this.info.optContent[idx].checked=!this.info.optContent[idx].checked
				this.info.value=[]
				this.info.optContent.some(topic => {
					if (topic.checked) {
						this.info.value.push(topic)
					}
				})
			},
			toPrev() {
				if (this.topicAttr.length > 0) {
					let i = this.topicAttr.length - 1
					this.topicAttr.splice(i, 1)
					this.info = this.topicAttr[i - 1]
					this.curTopic = this.info.orderNo
				}
			},
			toNext(type) {
				let isDisabled = false
				let toCode = ''
				this.info.optContent.some(item => {
					if (this.info.type == 3 || this.info.type == 4) {
						if (!item.value) {
							isDisabled = true
						}
						toCode = item.toCode
					}
					if (this.info.type == 1) {
						if (item.name == this.info.value) {
							toCode = item.toCode
						}
					}
					if (this.info.type == 2) {
						if (item.checked) {
							toCode = item.toCode
						}
					}
				})



				if (this.info.type == 1) {
					if (!this.info.value) {
						isDisabled = true
					}
				}
				console.log(this.info, 1211221)
				if (this.info.type == 2) {
					if (!this.info.value || this.info.value.length < 0) {
						isDisabled = true
					}
				}
				if (isDisabled) {

					if (this.info.type == 3 || this.info.type == 4) {

						this.$common.errorToShow('请填写信息！')
					} else {

						this.$common.errorToShow('请选择信息！')
					}
					return
				}
				if (type == 'submit') {
					this.toSubmit()
					return
				}

				this.getTopic(this.info.orderNo, toCode)

			},
			toSubmit() {
				let data = {
					startTime:this.startTime,
					endTime:this.getCurDate(),
					questionId: this.curId,
					evaluationId:this.evaluationId,
					answer: []
				}
				
				this.topicAttr.some(item => {
					let i = {
						"id": item.id,
						"value": item.value
					}
					if (item.type == 2) {


						item.optContent.some(topic => {
							if (topic.isInput && topic.value) {
								item.value.push(topic.value)
							}
						})
						i.value = String(item.value)
					}

					if (item.type == 3 || item.type == 4) {
						let attr = []
						item.optContent.some(topic => {
							attr.push(topic.value)
						})
						i.value = String(attr)
					}
					data.answer.push(i)
				})
				
				this.$api.submit_question(data, res => {
					if (res.code == 200) {
						clearInterval(this.timer)
						
							
							this.$common.successToShow('提交成功', () => {
							uni.redirectTo({
								url:'/subpage/testComplete/testComplete?id='+res.data.id
							});
							})
					} else {

						this.$common.errorToShow(res.message)
					}
				})

			},
			pad(number, length) {
			    var str = "" + number;
			    while (str.length < length) {
			        str = "0" + str;
			    }
			    return str;
			},
			getCurDate(){
				
				var now = new Date();
				    var year = now.getFullYear();
				    var month = this.pad(now.getMonth() + 1, 2); // 月份是从0开始的
				    var day = this.pad(now.getDate(), 2);
				    var hours = this.pad(now.getHours(), 2);
				    var minutes = this.pad(now.getMinutes(), 2);
				    var seconds = this.pad(now.getSeconds(), 2);
				let date=`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
				return date
			},
			getInfo() {
				let data = {
					id: this.curId
				}
				this.$api.questionInfo(data, res => {
					if (res.code == 200) {
						this.questionInfo = res.data
						if(res.data.limitTime){
							
							this.time=res.data.limitTime*60
							// this.getTimer()
						}
					}
				})
			},
			getTopic(currentNo, toCode) {

				let data = {
					questionId: this.curId,
					// orderBy: 'next'
				}
				if (currentNo) {
					data.currentNo = currentNo
				}
				if (toCode) {
					data.topicCode = toCode
				} else {

				}
				this.$api.questionTopic(data, res => {
					if (res.code == 200) {

						if (res.data) {

							res.data.optContent = JSON.parse(res.data.optContent)
							if (res.data.type == 2) {
								res.data.optContent.some(item => {
									this.$set(item, 'checked', false)
								})
							}
							res.data.value = ''
							this.info = res.data
							if (res.data.orderNo) {

								this.curTopic = res.data.orderNo
							}
							this.topicAttr.push(this.info)
						}
					}
				})
			},

			getInfo1(str) {


				this.$api.questionTopic({
					questionId: str
				}, res => {
					if (res.code == 200) {
						this.info = res.data;
						this.info.list = JSON.parse(res.data.optContent)
						this.initResult();
					}
				})
				// console.log(str)
				// var that=this;
				// if(!str){return};
				// var res={
				// 	id:101,
				// 	pid:101,
				// 	title:'中小学生心理健康量表',
				// 	list:[
				// 		{
				// 			type:0,//0单选,1多选
				// 			title:'你晚上要睡觉时，总想着明天的功课吗?',
				// 			options:['是','否']
				// 		},
				// 		{
				// 			type:0,//0单选,1多选
				// 			title:'我觉得闷闷不乐，情绪低沉',
				// 			options:['没有或很少时间','小部分时间','相当多时间','绝大部分或全部时间']
				// 		},
				// 		{
				// 			type:1,//0单选,1多选
				// 			title:'最喜欢一天什么时间段？',
				// 			options:['早上','中午','晚上']
				// 		},
				// 		{
				// 			type:0,//0单选,1多选
				// 			title:'你晚上要睡觉时，总想着明天的功课吗?',
				// 			options:['是','否']
				// 		},
				// 		{
				// 			type:0,//0单选,1多选
				// 			title:'我觉得闷闷不乐，情绪低沉',
				// 			options:['没有或很少时间','小部分时间','相当多时间','绝大部分或全部时间']
				// 		},
				// 		{
				// 			type:1,//0单选,1多选
				// 			title:'最喜欢一天什么时间段？',
				// 			options:['早上','中午','晚上']
				// 		}
				// 	]
				// };
				// that.info=res;
				// that.initResult();
			},
			submit() {
				var that = this;
				if (that.result[that.current].length == 0) {
					return
				};
				that.endTime = new Date().getTime();
				var time = Math.floor((that.endTime - that.startTime) / 1000);
				// 打印选中数据和用时
				console.log(that.result, time);
				uni.redirectTo({
					url: '/pages/evaluationStartInfo/evaluationStartInfo?pid=' + that.info.pid
				});
			},
			goPrev() {
				var that = this;
				// if(that.result[that.current].length==0||(that.current-1>=that.info.list.length)){
				// 	uni.showToast({
				// 		title: '请选择',
				// 		icon: 'none'
				// 	})
				// 	return
				// };
				that.current--;
				that.pdNumber = that.info.list[that.current].type
			},
			goNext() {
				var that = this;
				if (that.result[that.current].length == 0 || (that.current + 1 >= that.info.list.length)) {
					uni.showToast({
						title: '请选择',
						icon: 'none'
					})
					return
				};
				that.current++;
				that.pdNumber = that.info.list[that.current].type
			},
			initResult() {
				var that = this;
				if (!that.info.list) {
					return
				};
				var arr = [];
				that.info.list.map((i, index) => {
					arr[index] = []
				});
				that.result = arr;
			},

			scroll(e) {
				// console.log(this.nav_top_flag)
				if (e.detail.scrollTop > 40) {
					this.headerInfo.heade_flag = true
				} else {
					this.headerInfo.heade_flag = false
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.navTitle{
		color: #fff;
	}
	.pb50{
		padding-bottom: 50rpx;
	}
</style>
